<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浮动学习</title>
		<link rel="stylesheet" href="css/menu.css" />
		<link rel="stylesheet" href="css/img.css" />
		<link rel="stylesheet" href="css/form.css" />
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-family: arial;
			}
		</style>
	</head>

	<body>
		<div class="navi_container">
			<ul class="topmenu">
				<li>
					<a class="active">主页</a>
				</li>
				<li>
					<a>新闻</a>
				</li>
				<li>
					<a>联系我们</a>
				</li>
				<li>
					<a>关于我们</a>
				</li>
				<li style="float: right;">
					<a>关于</a>
				</li>
			</ul>
		</div>

		<div class="clear_fix">
			<div class="column side_menu">
				<ul>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
					<li>
						<a>菜单1</a>
					</li>
				</ul>
			</div>
			<div class="column right_content">
                <div class="drop_menu_parent">
                    <span class="menu_anchor">
                        自动弹出菜单
                    </span>
                    <div class="drop_menu_content">
                        <p>选项一</p>
                        <p>选项二</p>
                    </div>
                </div>
                <div class="drop_menu_parent">
                    <span class="menu_anchor">
                        菜单提示
                    </span>
                    <span class="tooltip">显示怎样创建提示框并带箭头</span>
                </div>
                <div class="img_ganary_parent">
                    <div class="container">
                        <a target="#" href="https://static.runoob.com/images/demo/demo1.jpg">
                            <img src="https://static.runoob.com/images/demo/demo1.jpg"/>
                        </a>
                        <div class="img_desc">图片描述</div>
                    </div>
                    <div class="container">
                        <a target="#" href="https://static.runoob.com/images/demo/demo1.jpg">
                            <img src="https://static.runoob.com/images/demo/demo1.jpg"/>
                        </a>
                        <div class="img_desc">图片描述</div>
                    </div>
                    <div class="container">
                        <a target="#" href="https://static.runoob.com/images/demo/demo1.jpg">
                            <img src="https://static.runoob.com/images/demo/demo1.jpg"/>
                        </a>
                        <div class="img_desc">图片描述</div>
                    </div>
                    <div class="container">
                        <a target="#" href="https://static.runoob.com/images/demo/demo1.jpg">
                            <img src="https://static.runoob.com/images/demo/demo1.jpg"/>
                        </a>
                        <div class="img_desc">图片描述</div>
                    </div>
                </div>
                <br style="clear:both"/>
                <h1>表单示例</h1>
                <div class="form_parent">
                    <form class="left_form">
                        <label>FirstName</label>
                        <input type="text" id="first_name" placeholder="first name"/>
                        <label>LastName</label>
                        <input type="text" id="last_name" placeholder="last name"/>
                        <label for="professional">Professional</label>
                        <select id="professional" name="professional">
                            <option value="p1">Doctor</option>
                            <option value="p1">Teacher</option>
                            <option value="p1">Professional</option>
                        </select>
                        <input type="submit" name="normal_post" value="提交"/>
                    </form>
                    <form class="right_form">
                        <label>FirstName</label>
                        <input type="text" id="first_name2" placeholder="first name"/>
                        <label>LastName</label>
                        <input type="text" id="last_name2" placeholder="last name"/>
                        <label for="professional2">Professional</label>
                        <select id="professional2" name="professional">
                            <option value="p1">Doctor</option>
                            <option value="p1">Teacher</option>
                            <option value="p1">Professional</option>
                        </select>
                        <input type="submit" name="variable_post" value="提交"/>
                    </form>
                </div>
			</div>
		</div>
	</body>

</html>